<template>
    <div>
        <ul>
            <li v-for="(user, index) in users" :key="index">
                <input v-if="currentId == user.id" type="text" v-model="user.name" :ref="'input_' + user.id">
                <span v-else>{{ user.name }} </span>
                <button @click="edit(user.id)">编辑</button>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data: function () {
        return {
            users: [
                { id: 1, name: '张三' },
                { id: 2, name: '李四' },
                { id: 3, name: '王五' }
            ],
            currentId: 0
        }
    },
    methods: {
        edit(id) {
            this.currentId = id;
            // 拼接当前的 DOM 节点
            let inputId = 'input_' + id;

            // 获取当前的dom节点并设置焦点。
            this.$nextTick(function () {
                this.$refs[inputId][0].focus();
            });
        }
    }
}
</script>

<style>

</style>